import './first.scss'
//引入swiper
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
import React, { useEffect, useState } from 'react'
import { getIndexNav, getIndexLun, getIndexSmall, getIndexNew } from '../services/index'
import { INavItem, ILunItem, ISmallItem, YAnItem } from '../untils/interface'
import {useHistory} from 'react-router-dom'

import LazyLoad from '../untils/loading'
const First: React.FC = () => {
    //导航数据
    let [list, setList] = useState<INavItem[]>([])
    //轮播图数据
    let [listLun, setListLun] = useState<ILunItem[]>([])
    //分类数据
    let [smallList, setsmallList] = useState<ISmallItem[]>([])
    //头部导航点击
    let [curNav, setCurNav] = useState<number>(0);
    //首页严选生活数据
    let [yanList, setyanList] = useState<YAnItem[]>([])
    let history=useHistory()
    useEffect(() => {
        //头部导航数据
        getIndexNav().then(res => {
            setList(res.data.rankCategoryList)
        })
        //轮播图数据
        getIndexLun().then(res => {
            // debugger
            setListLun(res.data.carouselList)
        })
        //分类数据
        getIndexSmall().then(res => {
            setsmallList(res.data.dataList)
        })
        //首页严选生活
        getIndexNew().then(res => {
            // debugger
            setyanList(res.data.dataList)
        })
    }, [])
    //图片懒加载 
    useEffect(()=>{
        if (listLun.length && yanList.length){
            new LazyLoad();
        }
    }, [listLun, yanList])

    //实例化轮播图
    useEffect(() => {
        let mySwiper = new Swiper('.Banner1', {
            on: {
                slideChange: function () {
                    let scl = document.querySelector('.A')
                    if (curNav >= 3) {
                        let num = (curNav - 2) * 75;
                        (scl as Element).scrollLeft = num
                    }
                    if (curNav < 4) {
                        (scl as Element).scrollLeft = 0
                    }
                    setCurNav((this as { activeIndex: number }).activeIndex)
                },
            },
        })
        mySwiper.slideTo(curNav, 100, false)
    }, [curNav])

    //实例化轮播图
    useEffect(()=>{
        new Swiper('.Banner2',{
            autoplay:true,
            loop:true
        })
    },[])
    //点击导航
    function clickNav(e: React.MouseEvent) {
        if (e.target !== e.currentTarget) {
            let index = parseInt((e.target as HTMLElement).dataset.index || '0')
            setCurNav((index as number));
        }
    }

      //分类详情页
      function goDetail(e: React.MouseEvent) {
        if (e.target !== e.currentTarget) {
            let obj = (e.target as HTMLElement).dataset.items
            history.push({
                pathname: "/mydetail",
                state:JSON.parse(obj)
            })
         }
       
   } 
  
    //渲染部分
    return <div className='first'>
        {/* 头部导航数据 */}
        <section className='A' onClick={clickNav}>
            {
                list.map((item, index) => {
                    return <li className={curNav === index ? 'Active' : ''} key={item.name} data-index={index}>{item.name}</li>
                })
            }
        </section>
        {/* 轮播图 */}
        <div className="swiper-container Banner1">
            <div className="swiper-wrapper">
                <div className="swiper-slide">
                    <div className="swiper-container Banner2">
                        <div className="swiper-wrapper">
                        {
                            listLun.map((item) => {
                                return  <div className="swiper-slide B"><img  key={item.image}  data-src={item.image} alt="" /></div>
                            })
                        }
                            
                        </div>
                    </div>

                       
                    {/* 分类数据 */}
                    <section className='C' onClick={goDetail}>
                        {
                            smallList.map((item) => {
                                return <li key={item.name}>
                                    {/* <img src={item.image} alt="" /> */}
                                    {/* <span>{item.name}</span> */}
                                    <img data-src={item.image} alt=""  data-items={JSON.stringify(item)} />
                                    <span data-items={JSON.stringify(item)}>{item.name}</span>
                                </li>


                            })
                        }
                    </section>
                    <div className='D'>
                        <h2>严选最新</h2>
                        <section className='D'>
                            {
                                yanList.map((item, index) => {
                                    return <dl key={index}>
                                        <dt>
                                            <img data-src={item.image} alt="" />
                                        </dt>
                                        <dd>
                                            <span>{item.title}</span>
                                        </dd>
                                    </dl>
                                })
                            }
                        </section>
                    </div>

                </div>
                <div className="swiper-slide">
                    22
                </div>
                <div className="swiper-slide">
                    33
                </div>
                <div className="swiper-slide">
                    44
                </div>
                <div className="swiper-slide">
                    55
                </div>
                <div className="swiper-slide">
                    66
                </div>
            </div>
        </div>

    </div>
}
export default First